<template>
  <div>
    <div class="container" style="padding: 15px">
      <div class="handle-box" style="margin-left: 8px; margin-bottom: 20px">
        <el-button
          type="success"
          icon="el-icon-plus"
          class="handle-del mr10"
          style="margin-right: 10px"
          @click="addOne"
          >增加</el-button
        >
        <el-select v-model="queryParam.type" placeholder="查找类型" style="width: 110px">
          <el-option value="BY_COURSE" label="课程名"></el-option>
          <el-option value="BY_EXAM" label="考试名"></el-option>
        </el-select>
        <el-select
          v-model="queryParam.fkCourseName"
          v-if="queryParam.type === 'BY_COURSE'"
          filterable
          placeholder="请输入课程名称"
          style="width: 170px; margin-left: 10px"
        >
          <el-option v-for="item in courses" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <el-select
          v-model="queryParam.fkExamName"
          v-else-if="queryParam.type === 'BY_EXAM'"
          filterable
          placeholder="请输入考试名称"
          style="width: 170px; margin-left: 10px"
        >
          <el-option v-for="item in exams" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <el-select
          disabled
          v-model="queryParam.fkExamName"
          v-else
          placeholder="请在左侧选择类型"
          style="width: 170px; margin-left: 10px"
        >
          <el-option v-for="item in exams" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <el-input
          clearable
          v-model="queryParam.paperName"
          placeholder="试卷名称"
          class="handle-input mr10"
          style="width: 200px; margin-left: 10px; margin-right: 10px"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
      </div>
      <el-card class="card" style="width:384px" v-if="examPapers.length === 0">
        <div style="padding: 14px">
          <i class="el-icon-info" style="font-size: 30px"
            ><span
              style="
                font-size: 15px;
                height: 30px;
                line-height: 30px;
                vertical-align: middle;
              "
              >&nbsp;暂无数据！请在上方确认查找条件！</span
            ></i
          >
        </div>
      </el-card>
      <el-card
        v-for="(paper, index) in examPapers"
        :key="index"
        :body-style="{ padding: '0px' }"
        class="card"
      >
        <div style="padding: 14px">
          <div style="margin-bottom: 2px">
            <span class="span_label">试卷名：</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="paper.paperName"
              placement="top"
            >
              <span class="span_info" :title="paper.paperName">{{
                paper.paperName
              }}</span></el-tooltip
            >
          </div>
          <div style="margin-bottom: 2px">
            <span class="span_label">所属考试：</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="paper.fkExamName"
              placement="top"
            >
              <span class="span_info">{{ paper.fkExamName }}</span>
            </el-tooltip>
          </div>
          <div style="margin-bottom: 4px">
            <span class="span_label">试卷标识：</span>
            <span class="span_info" :title="paper.mark">{{ paper.mark }}</span>
          </div>
          <div style="margin-bottom: 3px">
            <span class="span_label">总分：</span>
            <span class="span_info" :title="paper.totalScore">{{
              paper.totalScore + " 分"
            }}</span>
          </div>
          <div style="margin-bottom: 3px">
            <span class="span_label">备注：</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="paper.remarks"
              placement="top"
            >
              <span class="span_info" :title="paper.remarks">{{ paper.remarks }}</span>
            </el-tooltip>
          </div>
          <div style="margin-top: 10px 0 50px 0; float: right; padding-bottom: 10px">
            <el-button
              type="text"
              round
              size="small"
              style="font-size: 14px; color: green; padding: 5px"
              icon="el-icon-view"
              @click="viewHandler(paper)"
              >预览</el-button
            >
            <el-button
              type="text"
              round
              size="small"
              style="font-size: 14px; color: blue; padding: 5px"
              icon="el-icon-edit"
              @click="editHandler(paper)"
              >编辑</el-button
            >
            <el-button
              type="text"
              round
              size="small"
              style="font-size: 14px; color: red; padding: 5px"
              icon="el-icon-delete"
              @click="deleteHandler(paper)"
              >删除</el-button
            >
          </div>
        </div>
      </el-card>
    </div>

    <el-dialog
      title="新增"
      @close="closeAdd"
      :visible.sync="addVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1152px"
      top='5vh'
    >
    <edit-paper :exams="exams" @closeAdd="closeAdd" ref="addEditPaper"></edit-paper>
    </el-dialog>
    <el-dialog
      title="修改"
      @close="closeUpdate"
      :visible.sync="updateVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1152px"
      top='5vh'
    >
    <edit-paper :exams="exams" @closeAdd="closeUpdate" ref="updateEditPaper"></edit-paper>
    </el-dialog>
    <el-dialog
      title="预览"
      :append-to-body="true"
      :visible.sync="viewVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1152px"
      top='5vh'
    >
    <show-paper ref="showpaper" :allQuestions="allQuestions.length > 0 ? JSON.parse(JSON.stringify(allQuestions)) : []"></show-paper>
    </el-dialog>
  </div>
</template>

<script>
import EditPaper from './EditPaper.vue';
import ShowPaper from './ShowPaper.vue';
var _this;
export default {
  components: {EditPaper, ShowPaper},
  data() {
    return {
      examPapers: [],
      courses: [],
      exams: [],
      queryParam: {
        fkCourseName: "",
        fkExamName: "",
        paperName: "",
        type: "",
      },
      allQuestions: [],
      addVisible: false,
      viewVisible: false,
      updateVisible: false,
    };
  },
  computed: {},
  methods: {
    //删除操作
    deleteHandler(paper) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$post("/paper/del", [paper.id]).then((res) => {
            if (res.code === 0) {
              this.$message.success(res.msg);
              this.getData();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    //编辑操作
    async editHandler(paper) {
      this.updateVisible = true;
      await _this.getQuestions(true, JSON.parse(paper.questionList))
      this.$nextTick(()=>{
        let ref = _this.$refs.updateEditPaper
        ref.paper.id = paper.id
        ref.paper.paperName = paper.paperName
        ref.paper.fkExamName = paper.fkExamName
        ref.paper.mark = paper.mark
        ref.paper.remarks = paper.remarks
        ref.checkedQuestions = _this.allQuestions
      })
    },
    //预览试卷
    viewHandler(paper) {
      this.viewVisible = true;
      this.getQuestions(false, JSON.parse(paper.questionList));
    },
    // 增加
    addOne() {
      this.addVisible = true;
    },
    //搜索
    handleSearch() {
      if (this.queryParam.type === "") {
        this.$message.error("请选择查找类型");
        return;
      }
      if (this.queryParam.fkCourseName === "" && this.queryParam.fkExamName === "") {
        this.$message.error("请选择课程或考试");
        return;
      }
      this.getData();
    },
    // 获取课程
    getCourse() {
      this.$post("/course/byteacher", null).then((res) => {
        if (res.code === 0) {
          this.courses = res.data;
        }
      });
    },
    // 获取考试
    getExams() {
      this.$post("/exam/getnames", null).then((res) => {
        if (res.code === 0) {
          this.exams = res.data;
        }
      });
    },
    // 获取试卷数据
    getData() {
      this.$post("/paper/list", this.queryParam).then((res) => {
        if (res.code === 0) {
          this.examPapers = res.data;
        }
      });
    },
    //获取题目数据
    async getQuestions(withAnswer, questionsIds){
      let url = '/question/listbyid'
      if (withAnswer) {
        url = '/question/answerbyid'
      }
      await this.$post(url, questionsIds).then(res => {
        if (res.code === 0) {
          this.allQuestions = res.data
        } else {
          this.$message.error("获取题目失败！")
        }
      })
    },
    //弹窗关闭
    closeAdd(){
      this.addVisible = false;
      this.$nextTick(()=>{
        let ref = this.$refs.addEditPaper
        let isCheckClear = ref.active === 0 && ref.checkedQuestions.length === 0 && ref.paper.fkExamName === ''
        if (!isCheckClear) {
          this.$confirm('是否暂存修改？','提示',{
            type:'warning',
            confirmButtonText: '暂存',
          cancelButtonText: '清除',
          }).then(() => {})
            .catch(()=>{
              ref.reloadData()
            })
        }
      })
      this.getData();
    },
    closeUpdate(){
      this.updateVisible = false;
      this.$nextTick(()=>{
        this.$refs.updateEditPaper.reloadData()
      })
      this.getData()
    }
  },
  created() {
    _this = this;
    this.getCourse();
    this.getExams();
    this.getData();
  },
  watch: {
    queryParam: {
      handler: (val, oldval) => {
        if (
          _this.queryParam.type !== "" &&
          (_this.queryParam.fkCourseName !== "" || _this.queryParam.fkExamName !== "")
        ) {
          _this.getData();
        }
      },
      deep: true,
    },
  },
  mounted() {},
};
</script>
<style scoped>
.card {
  margin: 0 5px 15px 5px;
  width: 24%;
  border-radius: 15px;
  display: inline-block;
  background-color: #f5f5f5;
  /* background-image: linear-gradient(141deg, #a7cffcec 0%, #a7cffcec 51%, #a7cffcec 75%); */
}
.span_label {
  display: inline-block;
  font-weight: bold;
  vertical-align: middle;
}
.span_info {
  display: inline-block;
  white-space: nowrap; /*强制单行显示*/
  text-overflow: ellipsis; /*超出部分省略号表示*/
  overflow: hidden; /*超出部分隐藏*/
  max-width: 60%;
  vertical-align: middle;
}
.item {
  margin: 4px;
}
</style>
